<template>
  <nav class="navbar">
    <ul class="navbar-list w-100 d-flex justify-content-center">
      <li class="nav-item" :class="activeIndex === index ? 'active':''" v-for="(item,index) in navList.data"
        :key="item.id" @click="clickHandler(item.id,index)">
        {{item.name}}
      </li>
    </ul>
    <div class="course-container">
      <div class="column-item col-lg-3 col-md-6 col-sm-6 col-6">
        <div class="course-item" v-for="item in currentCourseList?.slice(0,1)" :key="item.id">
          <div class="course-img">
            <a href="">
              <img class="item-img" src="http://image.howzhi.com/course/2019/08-22/17073797ed76220534.jpg" alt="">
            </a>
          </div>
          <div class="course-info">
            <a class="course-title">{{item?.title}}</a>
            <div class="info-row">
              <div class="author-info">
                <img :src="item.author?.avatar" alt="" style="width:20px;height:20px;">
                <a>{{item.author?.name}}</a>
              </div>
              <div class="course-price" :class="coursePrice(item?.price)">
                <span>{{item?.price === 0 ? '免费': `￥${item?.price}.00`}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="column-item col-lg-3 col-md-6 col-sm-6 col-6">
        <div class="course-item" v-for="item in currentCourseList?.slice(1,3)" :key="item.id">
          <div class="course-img">
            <a href="">
              <img class="item-img" :src="item?.image" alt="">
            </a>
          </div>
          <div class="course-info">
            <a class="course-title">{{item?.title}}</a>
            <div class="info-row">
              <div class="author-info">
                <img :src="item.author?.avatar" alt="" style="width:20px;height:20px;">
                <a>{{item.author?.name}}</a>
              </div>
              <div class="course-price" :class="coursePrice(item?.price)">
                <span>{{item?.price === 0 ? '免费': `￥${item?.price}.00`}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="column-item col-lg-3 col-md-6 col-sm-6 col-6">
        <div class="course-item" v-for="item in currentCourseList?.slice(3,5)" :key="item.id">
          <div class="course-img">
            <a href="">
              <img class="item-img" :src="item?.image" alt="">
            </a>
          </div>
          <div class="course-info">
            <a class="course-title">{{item?.title}}</a>
            <div class="info-row">
              <div class="author-info">
                <img :src="item.author?.avatar" alt="" style="width:20px;height:20px;">
                <a>{{item.author?.name}}</a>
              </div>
              <div class="course-price" :class="coursePrice(item?.price)">
                <span>{{item?.price === 0 ? '免费': `￥${item?.price}.00`}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="column-item col-lg-3 col-md-6 col-sm-6 col-6">
        <div class="course-item" v-for="item in currentCourseList?.slice(5,7)" :key="item.id">
          <div class="course-img">
            <a href="">
              <img class="item-img" :src="item?.image" alt="">
            </a>
          </div>
          <div class="course-info">
            <a class="course-title">{{item?.title}}</a>
            <div class="info-row">
              <div class="author-info">
                <img :src="item.author?.avatar" alt="" style="width:20px;height:20px;">
                <a>{{item.author?.name}}</a>
              </div>
              <div class="course-price" :class="coursePrice(item?.price)">
                <span>{{item?.price === 0 ? '免费': `￥${item?.price}.00`}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </nav>
</template>

<script>
import { reactive, onMounted, ref, computed, getCurrentInstance } from 'vue'
import { getGoodCoursesNavList, getGoodCoursesList, getGoodCoursesListById } from '../api'
export default {
  props: ['goodCourses'],
  setup (props) {
    const instance = getCurrentInstance()
    const navList = reactive({
      data: []
    })
    const courseList = reactive({
      data: []
    })
    const activeIndex = ref(0)
    onMounted(async () => {
      const navListRes = await getGoodCoursesNavList()
      navList.data = navListRes.data
      // console.log(navList.data)
      const courseListRes = await getGoodCoursesList()
      courseList.data = courseListRes.data
      // console.log(courseList.data)
    })
    const currentCourseList = computed(() => {
      if (activeIndex.value <= 1) {
        return courseList.data[activeIndex.value]?.coursesList
      } else {
        return courseList.data
      }
    })
    // console.log(currentCourseList)
    // 处理导航栏点击事件
    function clickHandler (id, index) {
      activeIndex.value = index
      console.log(id, index)
      if (index > 1) {
        getGoodCoursesListById(id).then(res => {
          courseList.data = res.data
          console.log(courseList.data)
        }).catch(err => { console.log(err) })
      } else {
        getGoodCoursesList().then(res => {
          courseList.data = res.data
        }).catch(err => { console.log(err) })
      }
    }
    function coursePrice (price) {
      return price === 0 ? '' : 'expensive'
    }
    return { navList, courseList, activeIndex, clickHandler, coursePrice, currentCourseList }
  }
}
</script>

<style lang="scss" scoped>
.navbar {
  padding: 0;
  .navbar-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    .nav-item {
      box-sizing: border-box;
      margin: 0 10px 5px;
      padding: 6px 12px;
      border: 1px solid #fff;
      cursor: pointer;
      &:hover {
        background-color: #15c288;
        border-radius: 2px;
        border: 1px solid #15c288;
        color: #fff;
      }
      &.active {
        background-color: #15c288;
        border-radius: 2px;
        border: 1px solid #15c288;
        color: #fff;
      }
    }
  }
  .course-container {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
    .column-item {
      display: flex;
      flex-direction: column;
      padding: 0;
      .course-item {
        padding: 12px 10px;
        @media (max-width: 992px) {
          margin-bottom: 10px;
        }
        .course-img {
          width: 100%;
          overflow: hidden;
          a {
            display: block;
            width: 100%;
          }
        }
        .item-img {
          width: 100%;
          background-color: #f3f3f3;
          transition: all 0.4s ease;
          &:hover {
            transform: scale(1.1);
          }
        }
        .course-info {
          margin-top: 10px;
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          .course-title {
            font-weight: 600;
            color: #444;
          }
          .info-row {
            display: flex;
            margin-top: 10px;
            justify-content: space-between;
            margin-top: 10px;
            .author-info {
              img {
                position: relative;
                border-radius: 50%;
              }
              a {
                margin-left: 2px;
                color: #999;
              }
            }
            .course-price {
              color: #15c288;
              &.expensive {
                color: #fd9271;
              }
            }
          }
        }
      }
    }
  }
}
</style>
